<template>
  <div ref="guide-nav" class="guide-page">
    <router-link to="/directive">1.自定义指令</router-link>
    <router-link to="/vmodelVuexState">2.v-model中如何使用Vuex的state</router-link>
    <router-link to="/iconfont">3.阿里巴巴矢量图标库</router-link>
    <router-link to="/vuexStateGetters">4.vuex核心概念</router-link>
    <router-link to="/lifeCycleHookFunc">5.父子组件生命周期钩子函数执行顺序</router-link>
    <router-link to="/vmodel">6.自定义组件的v-model</router-link>
    <router-link to="/test">#.测试</router-link>
  </div>
</template>

<script>
export default {}
</script>

<style>
:root {
  --primary-color: #c0392b;
}
a {
  text-decoration: none;
  font-size: 18px;
  color: var(--primary-color);
  padding: 10px 2px;
  padding-left: 8px;
  border-bottom: solid 1px #eee;
}
a:hover {
  color: white;
  background: var(--primary-color);
}
.router-link-active {
  color: white;
  background: var(--primary-color);
}
.guide-page {
  /* width: 18%; */
  width: 350px;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
  overflow-y: scroll;
}
section {
  border: solid 1px #bbb;
  padding: 10px;
}
</style>
